<template>
  <div id="banner">
    <div id="box">
        <img src="../../../../assets/swiper/swiper1/1.jpg" alt="">
        <img src="../../../../assets/swiper/swiper1/2.jpg" alt="">
        <img src="../../../../assets/swiper/swiper1/3.jpg" alt="">
        <img src="../../../../assets/swiper/swiper1/4.jpg" alt="">
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    components:{

    },
    watch:{

    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods: {
        
    }
}
</script>

<style scoped>
#banner {
    border: 1px solid red;
    width: 200px;
    overflow: hidden;
}
#banner>#box {
    width: 800px;
    /* 加入动画 名称 完成时间 循环次数 动画执行时间*/
    animation: myname 10s infinite 1s;
}
#box>img {
    width: 200px;
    float: left;
}
#banner>#box:hover {
    animation-play-state: paused;
}
/* 定义动画 */
@keyframes myname {
    35% {
        margin-left: -200px;
    }
    70% {
        margin-left: -400px;
    }
    100% {
        margin-left: -600px;
    }
}
</style>